import { Component, ReactNode, lazy, Suspense } from "react";

// resolve类型处理
type Iresolve = (params: Promise<any>) => void

// 利用了基于webpack代码分割能力
let Other = lazy(() => new Promise((resolve: Iresolve, reject) => {
    setTimeout(() => {
        // resolve(import('./Other'))
        reject('一个错误')
    }, 2000)
}))
// console.log(Other);

class LazyCom extends Component {
    render(): ReactNode {
        return (
            <fieldset>
                <legend>懒加载组件</legend>
                {/* Suspense一般用于包裹异步组件，处理降级的ui效果 */}
                <Suspense fallback={<h3>正在加载......</h3>}>
                    <Other />
                </Suspense>
            </fieldset>
        )
    }
}

export default LazyCom